<%--
  Created by IntelliJ IDEA.
  User: yuyufeng
  Date: 2018/1/22
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机端滑块验证码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #valid-image {
            /*background-image: url("static/image/valid.png");*/
            width: 312px;
            height: 155px;
            /*border: 1px solid red;*/
        }

        #valid-slider {
            /*background-image: url("static/image/slider.png");*/
            width: 55px;
            height: 55px;
            border: solid 1px #ffffff;
            position: absolute;
            left: 32px;
            top: 100px;
            display: none;
            border: 1px solid red;

        }

        #slider-message {
            color: #45494c;
            line-height: 40px;
            text-align: center;
            margin-top: -39px;
        }

        #slider-box {
            border: solid 1px #CCCCCC;
            width: 312px;
            height: 40px;
            margin-top: 10px;
            position: relative;
            background-color: #EEEEEE;
        }

        #slider-item {
            position: absolute;
            top: -3px;
            left:-1px;
            height: 44px;
            width: 42px;
            text-align: center;
            line-height: 42px;
            border: solid 1px #CCCCCC;
            background-color: #FFFFFF;
            border-radius: 5px;
            position: absolute;
        }

        #slider-item-left {
            width: 0px;
            height: 40px;
            margin-top: -1px;
            margin-left: -1px;
            border: solid 1px #CCCCCC;
            border-right: none;
        }
    </style>
</head>

<body>
<h3 class="text-center">手机端滑块验证码</h3>
<div id="valid-image" class="center-block"></div>
<div id="valid-slider" class=""></div>
<div id="slider-box" class="center-block">
    <div id="slider-item"></div>向右移动滑块进行验证
</div>

</body>
<script src="static/jquery.js"></script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script>
    //312,155
    var sliderItem = document.getElementById("slider-item")
    var sliderBox = document.getElementById("slider-box")
    var validSalider = document.getElementById("valid-slider")
    var validImage = document.getElementById("valid-image")

    var boxLeft = sliderBox.offsetLeft;

    var validSaliderTop;
    var validSaliderWidth = 55




    $.get("/validImageJsonMB", function (res) {
//        console.log(res)
        var res = JSON.parse(res)
        validSaliderTop = res.locationY + validImage.offsetTop
        validSalider.style.top = validSaliderTop + 'px';
        if (res.status == 200) {
            validImage.style.backgroundImage = "url('/validImageMB')"
            validSalider.style.backgroundImage = "url('/validImageLocationMB')"
        }
    })

    //移动端滑动
    sliderItem.ontouchstart = function (e) {
        validSalider.style.display = 'block';
        document.ontouchmove = function (e) {
            var left = e.targetTouches[0].clientX - boxLeft
            if (left < 0) {
                left = 0;
            }
            if (left > (312 - validSaliderWidth)) {
                left = 312 - validSaliderWidth
            }
            sliderItem.style.left = left + 'px';
            validSalider.style.left = (left + boxLeft) + 'px';
        }

        document.ontouchend = function (e) {
            document.ontouchmove = null
            document.ontouchend = null
            var location = (validSalider.offsetLeft - boxLeft) + ',' + (validSaliderTop - validImage.offsetTop)
            doValid(location)
        }

    }


    //pc端滑动
    sliderItem.onmousedown = function (e) {
        validSalider.style.display = 'block';
        document.onmousemove = function (e) {
            var left = e.clientX - boxLeft
            if (left < 0) {
                left = 0;
            }
            if (left > (312 - validSaliderWidth)) {
                left = 312 - validSaliderWidth
            }
            sliderItem.style.left = left + 'px';
            validSalider.style.left = (left + boxLeft) + 'px';
        }

        document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
            var location = (validSalider.offsetLeft - boxLeft) + ',' + (validSaliderTop - validImage.offsetTop)
            doValid(location)
        }

    }



    function doValid(location) {
        $.get("/doValidServletMB?location=" + location, function (res) {
            console.log(location)
            alert(res.data)
        })
    }

</script>
</html>
